<template>
    <div class="container">
        <div class="notice">
            <div class="item">
                <div class="item_child">
                    <e-charts
                        ref="chart1"
                        style="width: 100%; height: 100%"
                        :option="option1"
                    ></e-charts>
                </div>
                <div class="item_child">
                    <e-charts
                        ref="chart2"
                        style="width: 100%; height: 100%"
                        :option="option2"
                    ></e-charts>
                </div>
            </div>
            <div class="item">
                <div class="item_child">
                    <e-charts
                        ref="chart3"
                        style="width: 100%; height: 100%"
                        :option="option3"
                    ></e-charts>
                </div>
                <div class="item_child">
                    <e-charts
                        ref="chart4"
                        style="width: 100%; height: 100%"
                        :option="option4"
                    ></e-charts>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import http from '@/utils/http'
import * as util from '@/utils/util'
import { ElMessage } from 'element-plus'

onMounted(async () => {
    await getData()
    setInterval(function () {
        getData()
    }, 60 * 1000)
    nextTick(() => {
        emits('finish')
    })
})

const emits = defineEmits(['finish'])
const chart1 = ref()
const chart2 = ref()
const chart3 = ref()
const chart4 = ref()

// 监听窗口大小变化事件
window.addEventListener('resize', function () {
    if (chart1.value) {
        chart1.value.resize()
    }
    if (chart2.value) {
        chart2.value.resize()
    }
    if (chart3.value) {
        chart3.value.resize()
    }
    if (chart4.value) {
        chart4.value.resize()
    }
})

const option1 = ref({
    series: [
        {
            type: 'gauge',
            min: 0,
            max: 20,
            axisLine: {
                lineStyle: {
                    width: 4,
                    color: [
                        [0.3, '#5FB878'],
                        [0.7, '#1E9FFF'],
                        [1, '#FF5722'],
                    ],
                },
            },
            pointer: {
                itemStyle: {
                    color: 'auto',
                },
                width: 2,
            },
            axisTick: {
                distance: 3,
                length: 3,
                lineStyle: {
                    color: '#fff',
                    width: 1,
                },
            },
            splitLine: {
                distance: 5,
                length: 6,
                lineStyle: {
                    color: '#fff',
                    width: 2,
                },
            },
            axisLabel: {
                show: false,
                color: 'auto',
                distance: 5,
                fontSize: 10,
            },
            title: {
                show: true,
                fontSize: 12,
                color: '#b8e6ff',
                offsetCenter: ['0%', '110%'],
            },
            detail: {
                valueAnimation: true,
                formatter: '{value}A',
                color: 'auto',
                fontSize: 14,
                offsetCenter: ['0%', '65%'],
            },
            data: [
                {
                    name: '风机',
                    value: 0,
                },
            ],
        },
    ],
})

const option2 = ref({
    series: [
        {
            type: 'gauge',
            min: 0,
            max: 20,
            axisLine: {
                lineStyle: {
                    width: 4,
                    color: [
                        [0.3, '#5FB878'],
                        [0.7, '#1E9FFF'],
                        [1, '#FF5722'],
                    ],
                },
            },
            pointer: {
                itemStyle: {
                    color: 'auto',
                },
                width: 2,
            },
            axisTick: {
                distance: 3,
                length: 3,
                lineStyle: {
                    color: '#fff',
                    width: 1,
                },
            },
            splitLine: {
                distance: 5,
                length: 6,
                lineStyle: {
                    color: '#fff',
                    width: 2,
                },
            },
            axisLabel: {
                show: false,
                color: 'auto',
                distance: 5,
                fontSize: 10,
            },
            title: {
                show: true,
                fontSize: 12,
                color: '#b8e6ff',
                offsetCenter: ['0%', '110%'],
            },
            detail: {
                valueAnimation: true,
                formatter: '{value}A',
                color: 'auto',
                fontSize: 14,
                offsetCenter: ['0%', '65%'],
            },
            data: [
                {
                    value: 0,
                    name: '净化器',
                },
            ],
        },
    ],
})

const option3 = ref({
    series: [
        {
            type: 'gauge',
            min: 0,
            max: 100,
            axisLine: {
                lineStyle: {
                    width: 4,
                    color: [
                        [0.3, '#5FB878'],
                        [0.7, '#1E9FFF'],
                        [1, '#FF5722'],
                    ],
                },
            },
            pointer: {
                itemStyle: {
                    color: 'auto',
                },
                width: 2,
            },
            axisTick: {
                distance: 3,
                length: 3,
                lineStyle: {
                    color: '#fff',
                    width: 1,
                },
            },
            splitLine: {
                distance: 5,
                length: 6,
                lineStyle: {
                    color: '#fff',
                    width: 2,
                },
            },
            axisLabel: {
                show: false,
                color: 'auto',
                distance: 5,
                fontSize: 10,
                interval: 1,
            },
            title: {
                show: false,
                fontSize: 12,
                color: '#b8e6ff',
                offsetCenter: ['0%', '110%'],
            },
            detail: {
                valueAnimation: true,
                formatter: '{value}℃',
                color: 'auto',
                fontSize: 14,
                offsetCenter: ['0%', '80%'],
            },
            data: [
                {
                    value: 0,
                },
            ],
        },
    ],
})

const option4 = ref({
    series: [
        {
            type: 'gauge',
            min: 0,
            max: 100,
            axisLine: {
                lineStyle: {
                    width: 4,
                    color: [
                        [0.3, '#5FB878'],
                        [0.7, '#1E9FFF'],
                        [1, '#FF5722'],
                    ],
                },
            },
            pointer: {
                itemStyle: {
                    color: 'auto',
                },
                width: 2,
            },
            axisTick: {
                distance: 3,
                length: 3,
                lineStyle: {
                    color: '#fff',
                    width: 1,
                },
            },
            splitLine: {
                distance: 5,
                length: 6,
                lineStyle: {
                    color: '#fff',
                    width: 2,
                },
            },
            axisLabel: {
                show: false,
                color: 'auto',
                distance: 5,
                fontSize: 10,
                interval: 5,
            },
            title: {
                show: false,
                fontSize: 12,
                color: '#b8e6ff',
                offsetCenter: ['0%', '110%'],
            },
            detail: {
                valueAnimation: true,
                formatter: '{value}%',
                color: 'auto',
                fontSize: 16,
                offsetCenter: ['0%', '75%'],
            },
            data: [
                {
                    value: 0,
                },
            ],
        },
    ],
})

const getData = async () => {
    var mid = util.GetQueryParam('mid')
    if (mid) {
        var res = await http.get(`getlastrecord?mid=${mid}`)
        if (res.status === 0) {
            if (res.data) {
                let data = res.data
                if (data.g50401_Rtd != null) {
                    option1.value.series[0].data = [
                        {
                            value: data.g50401_Rtd,
                            name: '风机',
                        },
                    ]
                } else {
                    option1.value.series[0].data = []
                }
                if (data.g50701_Rtd != null) {
                    option2.value.series[0].data = [
                        {
                            value: data.g50701_Rtd,
                            name: '净化器',
                        },
                    ]
                } else {
                    option2.value.series[0].data = []
                }

                if (data.g50101_Rtd) {
                    option3.value.series[0].data = [
                        {
                            value: data.g50101_Rtd,
                            name: '温度(℃)',
                        },
                    ]
                } else {
                    option3.value.series[0].data = []
                }

                if (data.g50201_Rtd) {
                    option4.value.series[0].data = [
                        {
                            value: data.g50201_Rtd,
                            name: '湿度(%)',
                        },
                    ]
                } else {
                    option4.value.series[0].data = []
                }
            } else {
                ElMessage({
                    type: 'info',
                    message: '测点无资料或未连接',
                })
                //ElMessageBox.alert('测点无资料或未连接','提示',{confirmButtonText: '确定',});
            }
        } else {
            console.log(res)
            ElMessage(res.msg)
        }
    }
}
</script>

<style lang="less" scoped>
.container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .notice {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        box-sizing: border-box;
        padding: 0;
        margin: 0;

        .item {
            width: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            box-sizing: border-box;
            height: 50%;
            min-height: 100px;

            .item_child {
                display: flex;
                flex-direction: row;
                align-items: center;
                width: 50%;
                height: 100%;
            }
        }
    }
}
</style>
